<template>
  <div class="stbox">
    <div class="wrapper">
      <div class="wrapper-box one">
        <div class="title-content">
          <span>项目介绍</span>
          <i class="el-icon-warning" />
        </div>
        <div class="item-content">
          <img class="projectImg" :src="projectImg" alt="" />
        </div>
      </div>
      <div class="wrapper-box two">
        <div class="title-content">
          <span>系统信息</span>
          <i class="el-icon-warning" />
        </div>
        <div class="item-content">
          <div class="item1">
            <div class="content">
              <span class="num">{{ overStatist.today }}</span>
              <span>污水厂总数（个）</span>
            </div>
          </div>
          <div class="item1">
            <div class="content">
              <span class="num">{{ overStatist.yesterday }}</span>
              <span>设备总数（个）</span>
            </div>
          </div>
          <div class="item1">
            <div class="content">
              <span class="num">{{ overStatist.month }}</span>
              <span>累计进口水量（m³）</span>
            </div>
          </div>
          <div class="item2">
            <div class="content">
              <span class="num">{{ overStatist.l_month }}</span>
              <span>累计出口水量（m³）</span>
            </div>
          </div>
          <div class="item2">
            <div class="content">
              <span class="num">{{ overStatist.year }}</span>
              <span>日均水处理量（m³）</span>
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper-box three">
        <div class="title-content">
          <span>出水水质变化趋势</span>
          <div>
            <el-radio v-model="radio1" label="1" border size="mini"
              >今日</el-radio
            >
            <el-radio v-model="radio1" label="2" border size="mini"
              >本周</el-radio
            >
            <el-radio v-model="radio1" label="3" border size="mini"
              >本月</el-radio
            >
          </div>
        </div>
        <div class="item-content">
          <chart v-if="chartOneData" :option="chartOneOption" />
        </div>
      </div>
      <div class="wrapper-box four">
        <div class="title-content">
          <span>参数信息</span>
          <i class="el-icon-warning" />
        </div>
        <div class="item-content">
          <div class="content-top">
            <div class="title">
              <el-button
                type="text"
                :class="{ 'is-active': isActive == '1' }"
                @click="toggleActive('1')"
                >实时</el-button
              >
              <el-button
                type="text"
                :class="{ 'is-active': isActive == '2' }"
                @click="toggleActive('2')"
                >总和</el-button
              >
            </div>
            <div class="item">
              <div
                v-for="(item, index) in listFourTop"
                :key="index"
                class="item-row"
              >
                <div class="flex">
                  <img :src="item.icon" alt="" />
                  <div class="name">{{ item.name }}</div>
                </div>
                <span>{{ item.data }}</span>
              </div>
            </div>
          </div>
          <div class="content-bottom">
            <div class="title">
              <el-button
                type="text"
                :class="{ 'is-active': isActive1 == '1' }"
                @click="toggleActive1('1')"
                >日</el-button
              >
              <el-button
                type="text"
                :class="{ 'is-active': isActive1 == '2' }"
                @click="toggleActive1('2')"
                >月</el-button
              >
              <el-button
                type="text"
                :class="{ 'is-active': isActive1 == '3' }"
                @click="toggleActive1('3')"
                >年</el-button
              >
            </div>
            <div class="item">
              <div
                v-for="(item, index) in listFourBottom"
                :key="index"
                class="item-row"
              >
                <div class="flex">
                  <img :src="item.icon" alt="" />
                  <div class="name">{{ item.name }}</div>
                </div>
                <span>{{ item.data }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper-box five">
        <div class="title-content">
          <span>出水量变化趋势</span>
          <div>
            <el-radio v-model="radio1" label="1" border size="mini"
              >今日</el-radio
            >
            <el-radio v-model="radio1" label="2" border size="mini"
              >本周</el-radio
            >
            <el-radio v-model="radio1" label="3" border size="mini"
              >本月</el-radio
            >
          </div>
        </div>
        <div class="item-content">
          <chart v-if="chartOneData" :option="chartOneOption" />
        </div>
        <!-- <div class="item-content">
          <chart v-if="chartTwoData" :option="chartTwoOption" />
        </div> -->
      </div>
      <div class="wrapper-box six">
        <div class="title-content">
          <span>PH曲线</span>
          <div>
            <el-radio v-model="radio3" label="1" border size="mini"
              >今日</el-radio
            >
            <el-radio v-model="radio3" label="2" border size="mini"
              >本周</el-radio
            >
            <el-radio v-model="radio3" label="3" border size="mini"
              >本月</el-radio
            >
          </div>
        </div>
        <div class="item-content">
          <chart v-if="chartThreeData" :option="chartThreeOption" />
        </div>
      </div>
      <div class="wrapper-box seven">
        <div class="title-content">
          <span>30日系统能耗</span>
          <i class="el-icon-warning" />
        </div>
        <div class="item-content">
          <chart v-if="chartFourData" :option="chartFourOption" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import chart from "@/components/Echarts/chart";
import {
  List,
  months,
  years,
  project,
  getWaterQuality,
  eletricData,
  waterParameter,
  electricTotal
} from "@/api/tongji";
const colorList = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc"
];

export default {
  name: "Dashboard",
  components: {
    chart
  },
  data() {
    return {
      checkDate: null,
      overStatist: {
        month: 0,
        today: 0,
        yesterday: 0,
        l_month: 0,
        year: 0,
        l_year: 0
      },
      isEmptyShowSCEList: true,
      isEmptyShowSUMList: true,
      isEmptyShowpayType: true,
      isEmptyShowOlderNum: true,
      listX: null,
      listY: null,
      projectName: "",
      projectImg: "",
      isActive: "1",
      isActive1: "1",
      listFourTop: [],
      listFourBottom: [],
      radio1: "1",
      radio2: "1",
      radio3: "1",
      chartOne: {},
      chartThree: {},
      chartOneOption: {},
      chartTwoOption: {},
      chartThreeOption: {},
      chartFourOption: {},
      chartOneData: false,
      chartTwoData: false,
      chartThreeData: false,
      chartFourData: false
    };
  },
  computed: {
    ...mapGetters(["name"])
  },
  mounted() {
    this.$nextTick(() => {
      // 在此处执行你要执行的函数
      this.getSCE();
    });
  },
  created() {
    // 1、一组列表数据
    this.getList();
    // 2、项目图文简介
    this.getProject();
    // 3、水质数据，图表渲染，查询条件day，week，month
    this.getWaterQuality(); // 水
    // 4、参数统计（实时、总和）
    this.getWaterParameter("1");
    this.getElectricTotal("1"); // 电
    this.getEletricData();

    // this.getmonth()
    // this.getlastmonth()
    // this.getyear()
    // this.getlastyear()
    //
  },
  methods: {
    getList() {
      List().then(response => {
        this.overStatist = response.data;
        // this.list = data.data;
        // this.joinArr = data.data;
        // this.pagination = data;
      });
      this.listLoading = false;
    },

    // 项目图文简介
    getProject() {
      project().then(response => {
        this.projectName = response.data.name;
        this.projectImg = response.data.cover;
      });
      this.listLoading = false;
    },

    // 水质数据（今日day、本周week、本月month）
    getWaterQuality() {
      getWaterQuality({ date: "day" }).then(response => {
        this.chartOne = response.data;
        this.chartThree = response.data;
        this.chartFour = response.data;
        this.getLineCount();
        this.getBarCount();
      });
      this.listLoading = false;
    },
    // 耗电量数据（今日day、本周week、本月month）
    getEletricData() {
      eletricData({ date: "day" }).then(response => {
        this.chartOne = response.data;
        this.getLineCount();
      });
      this.listLoading = false;
    },
    // 获取本月数据
    getmonth() {
      months().then(response => {
        this.listX = response.data.date;
        this.listY = response.data.nums;
        this.getMonthLogCount();
      });
      this.listLoading = false;
    },
    // 参数统计（实时、总和）
    getWaterParameter(type) {
      const params = {
        date: type
      };
      waterParameter(params).then(response => {
        // this.listX = response.data.date
        // this.listY = response.data.nums
        // this.getMonthLogCount()
        this.listFourTop = response.data;
      });
      this.listLoading = false;
    },

    // 电 参数 日月年/123
    getElectricTotal(type) {
      const params = {
        date: type
      };
      electricTotal(params).then(response => {
        this.listFourBottom = response.data;
      });
    },

    // 获取上月数据
    // getlastmonth() {
    //   months({ month: 1 }).then((response) => {
    //     this.listX = response.data.date
    //     this.listY = response.data.nums
    //     this.getLastMonthLogCount()
    //   })
    //   this.listLoading = false
    // },
    // 获取本年数据
    getyear() {
      years().then(response => {
        this.listX = response.data.date;
        this.listY = response.data.nums;
        this.getYearLogCount();
      });
      this.listLoading = false;
    },
    // 获取去年数据
    getlastyear() {
      years({ year: 1 }).then(response => {
        this.listX = response.data.date;
        this.listY = response.data.nums;
        this.getLastYearLogCount();
      });
      this.listLoading = false;
    },
    // 第一个
    getLineCount() {
      var SCCounts = {
        // title: {
        //   text: '本月访问趋势',
        //   x: 'center'
        //   // y: '35%',
        //   // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        // },
        // color: colorList,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },
        legend: {
          data: ["污水厂_01", "污水厂02"],
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "(日期)",
          type: "category",
          boundaryGap: true,
          data: this.chartOne.x // 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
        },
        yAxis: {
          name: "(次数)",
          type: "value"
        },
        series: [
          {
            name: "污水厂_01",
            data: this.chartOne.污水厂_01, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "line",
            areaStyle: {},
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          },
          {
            name: "污水厂02",
            data: this.chartOne.污水厂02, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "line",
            areaStyle: {},
            smooth: true,
            symbolSize: 8
            // itemStyle: {
            //   color: 'rgb(140,205,130)'
            // }
          }
        ]
      };
      this.chartOneOption = SCCounts;
      this.chartOneData = true;

      this.chartThreeOption = SCCounts;
      this.chartThreeData = true;

      // var myChart = this.$echarts.init(this.$refs.SUMEchart)
      // SCCounts && myChart.setOption(SCCounts)
    },
    // 第二个
    getMonthLogCount() {
      var SCCounts = {
        // title: {
        //   text: '本月访问趋势',
        //   x: 'center'
        //   // y: '35%',
        //   // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },

        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "(日期)",
          type: "category",
          boundaryGap: true,
          data: this.listX // 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
        },
        yAxis: {
          name: "(次数)",
          type: "value"
        },
        series: [
          {
            name: "当日数据",
            data: this.listY, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "line",
            smooth: true,
            symbolSize: 8,
            itemStyle: {
              color: "rgb(140,205,130)"
            }
          }
        ]
      };
      this.chartTwoOption = SCCounts;
      this.chartTwoData = true;
      // var myChart = this.$echarts.init(this.$refs.SUMEchart)
      // SCCounts && myChart.setOption(SCCounts)
    },

    // 柱状图
    getBarCount() {
      var SCCounts = {
        // title: {
        //   text: '本月访问趋势',
        //   x: 'center'
        //   // y: '35%',
        //   // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        // },
        // color: colorList,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },
        legend: {
          data: ["污水厂_01", "污水厂02"],
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "(日期)",
          type: "category",
          boundaryGap: true,
          data: this.chartOne.x // 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
        },
        yAxis: {
          name: "(次数)",
          type: "value"
        },
        series: [
          {
            name: "污水厂_01",
            data: this.chartOne.污水厂_01, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "bar",
            areaStyle: {},
            smooth: true,
            symbolSize: 8
          },
          {
            name: "污水厂02",
            data: this.chartOne.污水厂02, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "bar",
            areaStyle: {},
            smooth: true,
            symbolSize: 8
          }
        ]
      };
      this.chartFourOption = SCCounts;
      this.chartFourData = true;
      // var myChart = this.$echarts.init(this.$refs.SUMEchart)
      // SCCounts && myChart.setOption(SCCounts)
    },

    // 交易金额 -图表
    getLastMonthLogCount() {
      //  交易金额
      var LastCountss = {
        title: {
          text: "上月访问趋势",
          x: "center"
          // y: '35%',
          // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },

        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "(日期)",
          type: "category",
          boundaryGap: false,
          data: this.listX // 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
        },
        yAxis: {
          name: "(次数)",
          type: "value"
        },
        series: [
          {
            name: "当日数据",
            data: this.listY, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "line",
            areaStyle: {},
            smooth: true,
            symbolSize: 8,
            itemStyle: {
              color: "rgb(140,205,130)"
            }
          }
        ]
      };
      var myChart = this.$echarts.init(this.$refs.MMLoginchart);
      LastCountss && myChart.setOption(LastCountss);
    },

    // 获取本年数据
    getYearLogCount() {
      var YearCounts = {
        title: {
          text: "本年访问趋势",
          x: "center"
          // y: '35%',
          // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },

        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "(日期)",
          type: "category",
          boundaryGap: false,
          data: this.listX // 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
        },
        yAxis: {
          name: "(次数)",
          type: "value"
        },
        series: [
          {
            name: "当日数据",
            data: this.listY, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "line",
            areaStyle: {},
            smooth: false,
            symbolSize: 8
          }
        ]
      };
      var myChart = this.$echarts.init(this.$refs.Yearchart);
      YearCounts && myChart.setOption(YearCounts);
    },

    // 去年访问趋势
    getLastYearLogCount() {
      //  交易金额
      var LastYearCounts = {
        title: {
          text: "去年访问趋势",
          x: "center"
          // y: '35%',
          // itemGap: 2, // 副标题和主标题之间的距离，默认是10
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },

        grid: {
          left: 50,
          right: 50,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          name: "(日期)",
          type: "category",
          boundaryGap: false,
          data: this.listX // 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
        },
        yAxis: {
          name: "(次数)",
          type: "value"
        },
        series: [
          {
            name: "当日数据",
            data: this.listY, // 820, 932, 901, 934, 1290, 1330, 1320
            type: "line",
            areaStyle: {},
            smooth: false,
            symbolSize: 8
          }
        ]
      };
      var myChart = this.$echarts.init(this.$refs.LastYearchart);
      LastYearCounts && myChart.setOption(LastYearCounts);
    },

    // 交易金额 -图表
    getSCE() {
      //  交易金额
      var SCEoption = {
        title: {
          text: "交易金额(元)"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}"
        },
        // legend: {
        //   data: [{
        //     name: '销售总笔数',
        //     icon: 'rect'
        //   }],
        //   top: 1,
        //   left: 1,
        //   bottom:3,
        //   itemGap: 10,
        //   itemWidth: 18,
        //   itemHeight: 18,
        //   textStyle: {
        //     fontSize: 18,
        //     color: "#323232"
        //   }
        // },
        grid: {
          left: 70
          // right: 10,
          // top: 30,
          // bottom: 30,
          // borderWidth: 1
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3"],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 18,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            // margin: 14,
            textStyle: {
              fontSize: 16,
              color: "#999999"
            }
          }
        },
        series: [
          {
            name: "交易金额",
            type: "bar",
            barGap: 0,
            data: ["222", "3330", "555"],
            barMaxWidth: 100
            // itemStyle: {
            //   normal: {
            //     color: new Chart.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: "#83bff6" },
            //       { offset: 0.5, color: "#188df0" },
            //       { offset: 1, color: "#188df0" }
            //     ])
            //   },
            //   emphasis: {
            //     color: new Chart.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: "#2378f7" },
            //       { offset: 0.7, color: "#2378f7" },
            //       { offset: 1, color: "#83bff6" }
            //     ])
            //   }
            // }
          }
        ]
      };
      // var myChart = this.$echarts.init(this.$refs.SCEchart);
      // SCEoption && myChart.setOption(SCEoption);
    },
    toggleActive(type) {
      this.isActive = type;
      this.getWaterParameter(type);
    },
    toggleActive1(type) {
      this.isActive1 = type;
      this.getElectricTotal(type);
    }
  }
};
</script>

<style lang="scss" scoped>
// .dashboard {
//   &-container {
//     margin: 30px;
//   }

//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }

// .el-header,
// .el-footer {
//   background-color: #b3c0d1;
//   color: #333;
//   text-align: center;
//   line-height: 60px;
//   height: 200px !important;
// }

// .el-aside {
//   background-color: #d3dce6;
//   color: #333;
//   text-align: center;
//   line-height: 200px;
// }

// .el-main {
//   background-color: #e9eef3;
//   color: #333;
//   text-align: center;
//   line-height: 160px;
// }

// body>.el-container {
//   margin-bottom: 40px;
// }
.stbox {
  padding: 0 8px;
}

.wrapper {
  // height: calc(100vh - 150px);
  // height: 100vh;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  // grid-template-rows: 4fr 3fr 2fr;
  grid-gap: 10px;
  grid-template-rows: 400px 300px 200px;
  overflow-y: auto;
}

.wrapper-box {
  background-color: #00156177;

  .title-content {
    display: flex;
    justify-content: space-between;
    color: #fff;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    background-image: linear-gradient(to right, #0d3890, #173a8d);
    align-items: center;
  }

  .item-content {
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 45px);
    padding: 10px 5px;
  }
}

.one {
  grid-column: 1 / 4;
  // grid-row: 1 / 4;

  .projectImg {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    object-fit: contain;
  }
}

.two {
  grid-column: 4/ 7;
  // grid-row: 1 / 4;

  .item-content {
    justify-content: space-around;
    align-content: space-around;
  }

  .item1 {
    width: 30%;
    height: 45%;
  }

  .item2 {
    width: 45%;
    height: 45%;
  }

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #40a0ff15;
  }

  .num {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 12px;
  }
}

.three {
  grid-column: 1/3;
  // grid-row: 4 / 7;
}

.four {
  grid-column: 7;
  grid-row: 1 / 4;

  .title {
    width: 90%;
    height: 40px;
    line-height: 40px;
    margin: 12px auto 0;
    padding: 0 8px;
    background-color: #a9a9a979;
  }

  .item-content {
    width: 100%;

    .content-top {
      height: 60%;
      width: 100%;
    }

    .content-bottom {
      height: 40%;
      width: 100%;
    }

    .item {
      width: 100%;
      padding: 16px;
    }

    .item-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      margin-bottom: 12px;

      img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }

      .name {
        line-height: 35px;
        display: block;
      }
    }
  }

  .el-button--text {
    color: #fff;
    border: none !important;
  }

  .el-button--primary.is-active,
  .el-button--text:active {
    color: #3275fc;
    border: none !important;
  }
}

.five {
  grid-column: 3/5;
  // grid-row: 4 / 7;
}

.six {
  grid-column: 5/7;
  // grid-row: 4 / 7;
}

.seven {
  grid-column: 1/7;
  // grid-row: 7 / 9;
}

.is-active {
  color: #409eff !important;
  border: none !important;
}

.el-radio {
  margin-right: 0;
  color: #fff !important;
}
</style>
